<template>
  <div>
    <div class="section_common">
      <div class="select_nav">
        <div :class="navActive == 1 ? 'active' : ''" @click="changeNavActive">
          <van-badge :content="number">
            待处理 <span style="margin-left: 10px"> </span>
            <!--<van-badge style="font-size: 16px" :content="number" />-->
          </van-badge>
        </div>

        <div :class="navActive == 2 ? 'active' : ''" @click="changeNavActive">
          已审批
        </div>
      </div>
      <div class="search_input" :style="{'width':navActive == 2?'700px':'600px'}">
        <el-input v-model="search.keyword" size="mini" placeholder="请输入人名、标题"></el-input>
      </div>
      <div class="select_area" :style="{'width':navActive == 2?'700px':'600px'}">
        <el-cascader clearable @change="handleChange" v-model="search.type" :options="options" :props="{ expandTrigger: 'hover' }"
          placeholder="类型" size="mini">
        </el-cascader>

        <el-select class="status_select" v-if="navActive == 2" v-model="search.status" size="mini" placeholder="审批状态">
          <!--<el-option label="审核中" value="审核中"></el-option>-->
          <el-option label="已通过" value="已通过"></el-option>
          <el-option label="已驳回" value="已驳回"></el-option>
        </el-select>
        <!--      <el-select v-model="search.status" size="mini" placeholder="类型">
                <el-option label="上雪仓" value="shenzhen"></el-option>
                <el-option label="东莞仓" value="hefei"></el-option>
              </el-select>-->
        <el-date-picker v-model="search.time" type="daterange" size="mini" range-separator="-" value-format="yyyy-MM-dd"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
        <el-button size="mini" type="primary" @click="findSpApplyByUser(1)">搜索
        </el-button>
      </div>
      <div class="main">
        <div class="apply-empty" v-if="applys.length == 0">暂无更多内容</div>
        <div v-else class="item" v-for="(item,index) in applys" :key="index">
          <div v-on:click="spdetail(item)">
            <div class="top">
              <div class="title">
                <div :class="item.user_status == 'DELETED'? 'name delete_color' : 'name'">{{item.options1}}</div>
                <div class="status" v-if="item.options2==='已通过' || item.options2==='同意' || item.options2==='通过'" style="background-color: #5daf34">{{item.options2}}</div>
                <div class="status" v-else-if="item.options2==='已驳回' || item.options2==='拒绝' || item.options2==='不通过'" style="background-color: #ff6569">{{item.options2}}</div>
                <div class="status" v-else-if="item.options2==='审核中' ||item.options2==='审批中' ||item.options2==='组长审核通过'||item.options2==='主管审核通过' || item.options2==='申请中'" style="background-color: cornflowerblue">{{item.options2}}</div>
                <div class="status" v-else-if="item.options2==='已撤销'" style="background-color: #b9bec2">{{item.options2}}</div>
                <div class="status" v-else  style="background-color: goldenrod">{{item.options2}}</div>
                <div v-if="item.options7 == 'tra_need_apply' && item.options2=='审核中' && nowUser=='1303252781460627458'">
                  <!--1303252781460627458  1303252891523358721  1303252885051547650-->
                  <el-button type="success" @click="tra_need_apply_btn(item,index)" round size="mini">点此进行审核</el-button>
                </div>
              </div>
              <div class="time">{{item.options3}}</div>
            </div>
            <div class="info">
              <div class="type">{{item.options4}}</div>
              <div class="start">{{item.options5}}</div>
              <div class="start">{{item.options6}}</div>
              <!--<div class="end">结束时间：2021/12/31</div>-->
            </div>
          </div>

        </div>
      </div>
    </div>

    <el-dialog title="培训管理--需求申请审核窗口" :visible.sync="tra_need_apply.dialogVisible" width="30%"
      :before-close="handleClose">
      <el-input type="textarea" aria-placeholder="（可为空）在这里填写给申请人的反馈" v-model="tra_need_apply.result_content"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="tra_need_apply_handle(2)">驳 回</el-button>
        <el-button type="primary" @click="tra_need_apply_handle(1)">通 过</el-button>
      </span>
    </el-dialog>

    <van-pagination v-show="showPage" @change="findSpApplyByUser(2)" v-model="currentPage" :total-items="totalNum"
      :items-per-page="10" force-ellipses>
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
    </van-pagination>

  </div>
</template>

<script>
import Vue from "vue"
import { Pagination, Icon, Badge } from "vant"

Vue.use(Pagination)
Vue.use(Icon)
Vue.use(Badge)
/*页面参数说明
 * options1   标题
 * options2   结果
 * options3   时间
 * options4   随意内容
 * options5   随意内容
 * options6   随意内容
 * options7   类型
 * options8   当前申请/审批的id
 * user_status  用户状态：是否离职
 *
 * */
export default {
  data() {
    return {
      applys: [],
      navActive: 1,
      number: 0,
      search: {
        keyword: "",
        status: "",
        time: "",
        type: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", [start, end])
            },
          },
          {
            text: "最近30天",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit("pick", [start, end])
            },
          },
          {
            text: "最近90天",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit("pick", [start, end])
            },
          },
          {
            text: "最近180天",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
              picker.$emit("pick", [start, end])
            },
          },
        ],
      },

      nowUser: JSON.parse(localStorage.getItem("userInfo")).userId,
      currentPage: 1,
      totalNum: 1,
      showPage: true,

      tra_need_apply: {
        dialogVisible: false, //显示框
        result_content: "", //审核结果反馈
        id: "", //审核的申请id
        result: 0, //结果
        index: 0, //审核申请的索引
      },
      input: "",
      value: [],
      options: [
        {
          value: "renshiguanli",
          label: "人事管理",
          children: [
            {
              value: "转正申请",
              label: "转正申请",
            },
            {
              value: "物资维修申请",
              label: "物资维修申请",
            },
          ],
        },
        {
          value: "zhaopingguanli",
          label: "招聘管理",
          children: [
            {
              value: "我要内推",
              label: "我要内推",
            },
            {
              value: "招聘需求申请",
              label: "招聘需求申请",
            },
            {
              value: "员工背景登记",
              label: "员工背景登记",
            },
          ],
        },
        {
          value: "peixunguanli",
          label: "培训管理",
          children: [
            {
              value: "培训需求申请",
              label: "培训需求申请",
            },
            {
              value: "培训师申请",
              label: "培训师申请",
            },
            {
              value: "培训计划安排",
              label: "培训计划安排",
            },
          ],
        },
        {
          value: "zichanguanli",
          label: "资产管理",
          children: [
            {
              value: "物品领用申请",
              label: "物品领用申请",
            },
            {
              value: "物品采购申请",
              label: "物品采购申请",
            },
            {
              value: "物品领用申请-仓库",
              label: "物品领用申请-仓库",
            },
            {
              value: "物品报废申请",
              label: "物品报废申请",
            },
            {
              value: "摄影申领审批",
              label: "摄影申领审批",
            },
            {
              value: "摄影采购审批",
              label: "摄影采购审批",
            },
            {
              value: "摄影报废审批",
              label: "摄影报废审批",
            },
          ],
        },
      ],
      fromType: this.$route.params.type,
    }
  },
  /*activated () {
            if (this.fromType == 'needsToApplyList') {
                this.findTraNeedApplyByUser();
            } else {
                this.findSpApplyByUser();
            }
        },*/
  watch: {
    $route() {
      if (this.$route.fullPath == "/user/approve/Home") {
        this.findSpApplyByUser()
      }
    },
  },
  created() {
    if (this.fromType == "needsToApplyList") {
      this.findTraNeedApplyByUser()
    } else {
      this.findSpApplyByUser()
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
      console.log(this.search.type)
      /*if (value[0] === "zichanguanli") {
        if (value[1] === "摄影申领审批" ||  value[1] === "摄影采购审批" || value[1] === "摄影报废审批") {
          this.showPage = true
        } else {
          this.showPage = false
        }
      }else if (value[0] === "peixunguanli"){
        if (value[1] === "培训需求申请" ||  value[1] === "培训师申请" || value[1] === "培训计划安排") {
          this.showPage = true
        } else {
          this.showPage = false
        }
      }*/
      /*if (value[0] === '' || value[0] === "zichanguanli" || value[0] === "peixunguanli"){
        this.showPage = true
      }else {
        this.showPage = false
      }*/
    },
    //培训模块审核处理操作
    tra_need_apply_handle(result) {
      var that = this
      this.$https
        .post("/mobiles/needApplyExem", {
          id: this.tra_need_apply.id,
          result: result, //审核结果
          content: this.tra_need_apply.result_content,
        })
        .then(() => {
          if (result == 1) {
            that.applys[this.tra_need_apply.index].options2 = "已通过"
            that.tra_need_apply.dialogVisible = false
            that.tra_need_apply.result_content = ""
            return
          }
          that.applys[this.tra_need_apply.index].options2 = "已驳回"
          that.tra_need_apply.dialogVisible = false
          that.tra_need_apply.result_content = ""
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    //培训模块审核按钮
    tra_need_apply_btn(item, index) {
      this.tra_need_apply.id = item.options8
      this.tra_need_apply.index = index
      this.tra_need_apply.dialogVisible = true
    },
    //当前用户培训申请记录
    findTraNeedApplyByUser() {
      var that = this
      this.$https
        .post("/mobiles/getNeedApplyListUrl", {
          nowUser: this.nowUser,
          keywords: this.search.keyword,
          status: this.search.status,
          times: this.search.time,
        })
        .then(res => {
          that.applys = res.data.data
        })
        .catch(err => {
          console.log(err)
        })
    },

    spdetail(item) {
      if (item.path) {
        this.$router.push(item.path)
        // location.href=path;
        //window.open(item.path, '_blank');
      }
    },
    changeNavActive() {
      if (this.navActive == "1") {
        this.navActive = "2"
        this.showPage = true
      } else if (this.navActive == "2") {
        this.navActive = "1"
        this.showPage = false
      }
      this.currentPage = 1
      //调用查询方法
      this.findSpApplyByUser()
    },

    findSpApplyByUser(id) {
      localStorage.removeItem("approverPathArr") //移除存储path的属性
      if(id==1){
        this.currentPage = 1
      }
      //console.log("改变会输出")
      //初始化选择物品归属地和物品名称
      this.$https
        .post("/mobiles/findSpApplyByUser", {
          nowUser: this.nowUser,
          navActive: this.navActive,
          keywords: this.search.keyword,
          status: this.search.status,
          times: this.search.time,
          type: this.search.type,
          currentPage: this.currentPage,
        })
        .then(res => {
          if (!res.data.data.total || res.data.data.total === 0) {
            this.totalNum = res.data.data.total
            this.applys = res.data.data.records
          } else {
            this.totalNum = res.data.data.total
            this.applys = res.data.data.records
            if (this.navActive === 1) {
              this.number = res.data.data.total
            }
            var approverPathArr = []
            for (var i = 0; i < this.applys.length; i++) {
              approverPathArr.push(this.applys[i].path)
            }
            localStorage.setItem(
              "approverPathArr",
              JSON.stringify(approverPathArr)
            ) //将所有的path存储到本地
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.search_input,
.select_area {
  margin-top: 10px;
}
.select_area {

    .status_select{
        width: 100px;
    }
}
.search_input{
    /deep/ .el-input{
        width: 100%;
    }
}
.select_nav {
  width: 300px;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin-top: 10px;
  color: #999;

  & > div {
    cursor: pointer;

    &.active {
      color: #000;
      /*font-weight: 600;*/
    }
  }
}

.main {
  min-width: 700px;
  max-width: 100%;
  display: flex;
  flex-flow: column nowrap;
  margin-top: 10px;
  .apply-empty {
    width: 600px;
    font-size: 16px;
        color: #999;
        text-align: center;
        padding: 20px 0;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        // margin-bottom: 10px;
        margin: 0 auto 10px;

  }
  .item {
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 10px;
    font-size: 14px;
    background-color: white;

    .top {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;

      .title {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        .name {
          font-weight: 600;
          font-size: 16px;
        }
        .delete_color {
          color: #999999;
        }
        .status {
          padding: 1px 10px;
          background-color: goldenrod;
          color: white;
          margin-left: 5px;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
